/**
* Created by wl
*基金储备库列表页
*/
<template>
<div>
  <div class="right">
    <el-row class="ca-title">
        <el-col :span="10">
            <h3>基金储备库</h3>
        </el-col>
        <el-col :span="14">
            <div class="ca-pull-right">
                <el-button class="ca-color-download" icon="el-icon-plus" @click="toNewPro" :disabled="!isAuthIndexAdd">新建基金</el-button>
            </div>
        </el-col>
    </el-row>
    <el-form ref="form" :model="form" status-icon class="ca-box ca-m-t-10" align="center">
        <el-row class="ca-m-t-20">
            <el-col :span="8">
                <el-form-item label="基金类型：" label-width="120px">
                    <el-select placeholder="请选择" v-model="form.fundType" style="width: 100%;">
                        <el-option v-for="(item,index) in initView.itemType" :label="item.name" :value="item.id" :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="基金名称：" label-width="120px">
                    <el-input v-model="form.name" placeholder="支持模糊查询" @keyup.enter.native="search"></el-input>
                </el-form-item>
            </el-col>                
            <el-col :span="4" :offset="4">
                <el-button type="primary" @click="search()">查询</el-button>
                <el-button type="primary" @click="downloadFile" :disabled="!isAuthIndexDown">下载</el-button>
            </el-col>
        </el-row>
    </el-form>
    <div class="ca-m-t-20">
      <el-table class="ca-table table_p_01 el-wid-100" @sort-change="sortChange" :data="listData">
        <el-table-column label="序号" type="index" align="center" width="80px">
            <template slot-scope="scope">
                <csRedDot :label="scope.$index+1+''" :showDot="scope.row.red==1?true:false" :type="1"></csRedDot>
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" prop="fundName" label="基金名称" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-tooltip :content="scope.row.fundName" placement="top" v-if="scope.row.fundName">
                    <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="toDetailPage(scope.row.id)" :disabled="!isAuthIndexSeeTab">{{scope.row.fundName}}</el-button>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" prop="fundType" label="基金类型">
            <template slot-scope="scope">
                {{scope.row.fundType}}
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" prop="lastContact" label="最近更新时间">
            <template slot-scope="scope">
                {{scope.row.lastContact}}                
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" prop="region" label="区域">
            <template slot-scope="scope">
                {{scope.row.region}}                
            </template>
        </el-table-column>
        <el-table-column sortable="'custom'" prop="scale" label="拟设立规模</br>（万元）" :render-header="renderTitle">
            <template slot-scope="scope">
                {{scope.row.scale | format1}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteFundItem(scope.row.id)" :disabled="!isAuthIndexDel">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="changePage"
        :current-page="form.pageIndex"
        :page-sizes="vuePageSizes"
        :page-size="vuePageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        class="use-list-pagination ca-m-t-20">
        </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import { api } from './api';
import { apiHttp, STATUS_HTTP_SUCCESS } from '__service/csHttp';
import { isNoAuth } from '__service/utils';
export default {
    data() {
        return {
            isAuthIndexAdd: isNoAuth('基金储备库-列表页-新建'),
            isAuthIndexSee: isNoAuth('基金储备库-列表页-查看'),
            isAuthIndexDel: isNoAuth('基金储备库-列表页-删除'),
            isAuthIndexDown: isNoAuth('基金储备库-列表页-下载'),
            isAuthIndexSeeTab: isNoAuth('基金储备库-基金详情-查看'),
            listData: [],
            totalPage: 0,//总页数
            totalCount: 0,//总记录数
            form: {
                name: '',//基金名称
                orderBy: '',
                sort: '',
                fundType: '',//基金类型
                fundState: 6,
                pageIndex: 1,//页号
                pageSize: this.vuePageSize,//每页条数
            },//搜索参数
            formCopy: {
                name: '',//基金名称
                orderBy: '',
                sort: '',
                fundType: '',//基金类型
                fundState: 6,
                pageIndex: 1,//页号
                pageSize: this.vuePageSize,//每页条数
            },//搜索参数
            searchParams: {
                name: '',
                fundType: ''
            },
            initView: {
                itemType: [{name: '全部',id: ''}, ...this.$store.state.user.dictionaryMap.fundType]
            }
        }
    },
    mounted() {
        this.getFundAnsatReserves()
    },
    beforeRouteEnter(to, from, next) {
        next(vm=>{
            if (!vm.isAuthIndexSee) {
                vm.$message({
                    message: '没有此页面的操作权限',
                    type: 'error',
                    center: true
                });
                vm.$router.replace({name: 'personal-center', params: {tabIndex: 0}})
                return;
            }
        });
    },
    methods: {
        //   查询
        search() {
            this.form.pageIndex = 1
            this.searchParams.name = this.form.name
            this.searchParams.fundType = this.form.fundType
            this.getFundAnsatReserves()
        },
        // 下载文件
        downloadFile() {
            if (this.totalCount === 0) {
                this.$message({
                    type: 'warning',
                    message: '暂无数据',
                    center: true
                })
            } else {
                window.open(this.baseURL + api.DOWNLOAD_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=8&name=' + this.formCopy.name + '&fundType=' + this.formCopy.fundType + '&fundState=6');
            }
        },
        // 查询列表
        async getFundAnsatReserves() {
            const {resCode,data} = await apiHttp(api.GET_FUND_ANSAT_RESERVES,this.form)
            if (resCode === STATUS_HTTP_SUCCESS) {
                this.listData = data.resultData
                this.totalPage = data.totalPage
                this.totalCount = data.totalCount
                this.formCopy = Object.assign({}, this.form);
            }
        },
        // 新建基金
        toNewPro() {
            this.$router.push({name: 'fund-reserve-add',params: {itemId: '-1', openWindow: true}})
        },
        // 点击基金名称 进入详情页
        toDetailPage(fundId) {
            this.$router.push({name: 'fund-reserve-detail',params: {itemId: fundId,tabIndex: 0, openWindow: true}})
        },
        //删除按钮
        deleteFundItem(fundId) {
            this.$confirm('是否删除', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {
                apiHttp(api.DEL_FUND_ANSAT,{fundId}).then(res => {
                    if (res.resCode === STATUS_HTTP_SUCCESS) {
                        this.getFundAnsatReserves()
                        this.$message({type: 'success',message: '删除成功',center: true})
                    }
                })
            })
        },
        //排序
        sortChange(params) {
            if (!params.order) {
                this.form.orderBy = '';
                this.form.sort = '';
            } else {
                this.form.sort = params.order === 'ascending' ? 'asc' : 'desc';
                this.form.orderBy = params.prop;
                this.getFundAnsatReserves();
            }
        },
        // 改变页码
        changePage(val) {
            this.form.pageIndex = val
            if (val > this.totalPage) {
                this.form.pageIndex = this.totalPage
            }
            this.getFundAnsatReserves()
        },
        // 改变每页条数
        handleSizeChange(val) {
            this.form.pageSize = val
            this.form.pageIndex = 1
            this.getFundAnsatReserves()
        }
    },
    components: {
        csRedDot: require('__components/red-dot'), // 小红点
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.use-list-pagination{
    margin: 20px  25%;
}
.overflow-hidden{
    width: 101%;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>